<!-- 
	动态组件：广告图 组件
	props: 
		data: 组件数据
		
	action:
		
 -->
<template>
    <view
        class="dynamic-ad-list"
        :style="{
            'margin-left': getHeight(data.AdMarginlr),
            'margin-right': getHeight(data.AdMarginlr),
            'border-radius': getHeight(data.AdRadius),
        }">
        <!-- 混合 -->
        <view v-if="data.AdStyle != '1' && data.AdStyle != '2' && data.AdStyle != '3' && data.AdStyle != '4'">
            <!-- 2左2右 -->
            <view v-if="data.AdStyle == 'l2r2'" class="l2r2">
                <view class="ad-item-mixStyle-1" v-for="(item, index) in data.AdList" :key="index">
                    <image
                        mode="aspectFill"
                        :src="item.Image ? item.Image : ''"
                        :style="{
                            width: imageWidth,
                            height: imageHeight,
                        }"
                        @click="click(item)"></image>
                </view>
            </view>
            <!-- 1左2右 -->
            <view v-if="data.AdStyle == 'l1r2'" class="l1r2">
                <image
                    mode="aspectFill"
                    :src="data.AdList[0].Image ? data.AdList[0].Image : ''"
                    :style="{
                        width: '50%',
                        height: '240px',
                    }"
                    @click="click(data.AdList[0])"></image>
                <view>
                    <image
                        mode="aspectFill"
                        :src="data.AdList[1].Image ? data.AdList[1].Image : ''"
                        :style="{
                            width: imageWidth,
                            height: imageHeight,
                        }"
                        @click="click(data.AdList[1])"></image>
                    <image
                        mode="aspectFill"
                        :src="data.AdList[2].Image ? data.AdList[2].Image : ''"
                        :style="{
                            width: imageWidth,
                            height: imageHeight,
                        }"
                        @click="click(data.AdList[2])"></image>
                </view>
            </view>
            <!-- 1上2下 -->
            <view v-if="data.AdStyle == 't1b2'" class="t1b2">
                <image
                    mode="aspectFill"
                    :src="data.AdList[0].Image ? data.AdList[0].Image : ''"
                    :style="{
                        width: '100%',
                        height: '180px',
                    }"
                    @click="click(data.AdList[0])"></image>
                <view class="flex-row">
                    <image
                        mode="aspectFill"
                        :src="data.AdList[1].Image ? data.AdList[1].Image : ''"
                        :style="{
                            width: imageWidth,
                            height: imageHeight,
                        }"
                        @click="click(data.AdList[1])"></image>
                    <image
                        mode="aspectFill"
                        :src="data.AdList[2].Image ? data.AdList[2].Image : ''"
                        :style="{
                            width: imageWidth,
                            height: imageHeight,
                        }"
                        @click="click(data.AdList[2])"></image>
                </view>
            </view>
            <!-- 1左3右 -->
            <view v-if="data.AdStyle == 'l1r3'" class="flex-row">
                <image
                    mode="aspectFill"
                    :src="data.AdList[0].Image ? data.AdList[0].Image : ''"
                    :style="{
                        width: '50%',
                        height: '240px',
                    }"
                    @click="click(data.AdList[0])"></image>
                <view>
                    <image
                        mode="aspectFill"
                        :src="data.AdList[1].Image ? data.AdList[1].Image : ''"
                        :style="{
                            width: '100%',
                            height: '120px',
                        }"
                        @click="click(data.AdList[1])"></image>
                    <view class="flex-row">
                        <image
                            mode="aspectFill"
                            :src="data.AdList[2].Image ? data.AdList[2].Image : ''"
                            :style="{
                                width: imageWidth,
                                height: imageHeight,
                            }"
                            @click="click(data.AdList[2])"></image>
                        <image
                            mode="aspectFill"
                            :src="data.AdList[3].Image ? data.AdList[3].Image : ''"
                            :style="{
                                width: imageWidth,
                                height: imageHeight,
                            }"
                            @click="click(data.AdList[3])"></image>
                    </view>
                </view>
            </view>
        </view>
        <!-- 单排 -->
        <scroll-view v-else :class="{ scroll: data.AdScroll == '1' }" :scroll-x="data.AdScroll == '1'">
            <view
                :class="{
                    'scroll-items': data.AdScroll == '1',
                    'ad-items': data.AdScroll == '1',
                    'ad-items234':
                        (data.AdScroll == 0 && data.AdStyle == '2') ||
                        (data.AdScroll == 0 && data.AdStyle == '3') ||
                        (data.AdScroll == 0 && data.AdStyle == '4'),
                }">
                <view class="ad-item" v-for="(item, index) in data.AdList" :key="index">
                    <image
                        mode="widthFix"
                        :src="item.Image ? item.Image : ''"
                        :style="{
                            width: imageWidth,
                            height: imageHeight,
                        }"
                        @click="click(item)"></image>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { getHeight } from "./utils/util.js"
export default {
    props: {
        data: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            imageWidth: "100px",
            imageHeight: "100px",
        }
    },
    mounted() {
        this.getImageHeight()
        this.$emit("loadBack", this.data.index)
    },
    methods: {
        getImageHeight() {
            let that = this
            uni.getSystemInfo({
                //调用uni-app接口获取屏幕高度
                success(res) {
                    //成功回调函数
                    let w = res.screenWidth
                    let paddingW = 0
                    w = w - paddingW
                    if (that.data.AdStyle == "1") {
                        that.imageWidth = w + "px"
                        that.imageHeight = "150px"
                    } else if (that.data.AdStyle == "2" || that.data.AdStyle == "l2r2") {
                        that.imageWidth = w / 2 + "px"
                        that.imageHeight = "120px"
                    } else if (that.data.AdStyle == "3") {
                        that.imageWidth = w / 3 + "px"
                        that.imageHeight = "90px"
                    } else if (that.data.AdStyle == "4") {
                        that.imageWidth = w / 4 + "px"
                        that.imageHeight = "70px"
                    } else if (that.data.AdStyle == "t1b2") {
                        that.imageWidth = w / 2 + "px"
                        that.imageHeight = "180px"
                    } else if (that.data.AdStyle == "l1r2") {
                        that.imageWidth = w / 2 + "px"
                        that.imageHeight = "120px"
                    } else if (that.data.AdStyle == "l1r3") {
                        that.imageWidth = w / 4 + "px"
                        that.imageHeight = "120px"
                    }
                },
            })
        },
        click(item) {
            this.$emit("adClick", item)
        },
        getHeight(height) {
            return getHeight(height)
        },
    },
}
</script>

<style lang="scss" scope>
@import "@/uni-sub-base/components/dynamic/style/dynamic.scss";
.dynamic-ad-list {
    overflow: hidden;
}
.scroll {
    white-space: nowrap;
    width: 100%;
}
image {
    display: flex;
}
.ad-items {
    display: flex;
    flex-direction: row;
    .ad-item {
        flex: 1;
        display: flex;
        justify-content: center;
    }
}
.ad-items234 {
    display: flex;
    flex-direction: row;
    // flex-wrap: wrap;
    .ad-item {
        flex: 1;
        display: flex;
        justify-content: flex-start;
    }
}

.l2r2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    image {
        display: flex;
        flex: 1;
    }
}
.l1r2 {
    display: flex;
    flex-direction: row;
}
.flex-row {
    display: flex;
    flex-direction: row;
}
</style>
